এসভিজি (SVG) এর Path ট্যাগটি একটি অত্যন্ত শক্তিশালী এবং নমনীয় উপাদান, যা জটিল আকার এবং ডিজাইন তৈরি করতে ব্যবহৃত হয়। এসভিজি Path এর মাধ্যমে বিভিন্ন ধরনের রেখা, বেজিয়ার কেভ (Bezier curves), আর্ক (Arc) এবং মুভমেন্টের মাধ্যমে কাস্টম গ্রাফিক্স তৈরি করা সম্ভব। এটি ওয়েব ডিজাইন ও গ্রাফিক্সে অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে।
SVG Path এর মৌলিক গঠন
এটি <path> ট্যাগের মাধ্যমে তৈরি হয় এবং এর d অ্যাট্রিবিউটের মাধ্যমে যেকোনো জটিল রুট বা পাথ নির্ধারণ করা হয়। d অ্যাট্রিবিউটের মধ্যে একটি স্ট্রিং থাকে, যা বিভিন্ন কমান্ড দিয়ে পাথের নির্দেশনা দেয়।
উদাহরণ:
<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />
এখানে, M, H, V, Z এসব কমান্ডের মাধ্যমে পাথের রুট নির্ধারণ করা হয়েছে।
SVG Path এর প্রধান কমান্ডসমূহ
M (Move To):
এটি পাথের শুরু পয়েন্ট নির্ধারণ করে। এর পরে যেকোনো নতুন পয়েন্টে পাথ সরানো হয়।উদাহরণ:
M10 10এখানে, পাথ শুরু হবে (10, 10) পয়েন্টে।
L (Line To):
এটি পাথের বর্তমান অবস্থান থেকে একটি সোজা রেখা আঁকতে ব্যবহৃত হয়, যেখানে নতুন পয়েন্টে চলে যায়।উদাহরণ:
L90 10এখানে, পাথটি (90, 10) পয়েন্টে যাবে এবং সোজা রেখা তৈরি করবে।
H (Horizontal Line To):
এটি একটি অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়, শুধুমাত্র X অক্ষরের মান পরিবর্তন করা হয়।উদাহরণ:
H90এখানে, Y অক্ষরের মান অপরিবর্তিত রেখে অনুভূমিকভাবে X অক্ষরে 90 পয়েন্টে যাবে।
V (Vertical Line To):
এটি একটি উল্লম্ব রেখা আঁকতে ব্যবহৃত হয়, শুধুমাত্র Y অক্ষরের মান পরিবর্তন করা হয়।উদাহরণ:
V90এখানে, X অক্ষরের মান অপরিবর্তিত রেখে উল্লম্বভাবে Y অক্ষরে 90 পয়েন্টে যাবে।
C (Cubic Bezier Curve):
এটি একটি বেজিয়ার কেভের মাধ্যমে একটি নির্দিষ্ট পয়েন্টে যেতে ব্যবহৃত হয়। এর মধ্যে দুটি কন্ট্রোল পয়েন্ট এবং একটি শেষ পয়েন্ট থাকে।উদাহরণ:
C20 20, 40 40, 60 60এটি (20, 20) এবং (40, 40) কন্ট্রোল পয়েন্ট ব্যবহার করে (60, 60) পয়েন্টে যাবে।
- S (Smooth Cubic Bezier Curve):
এটি একটি প্রগতি যুক্ত কেভ তৈরি করতে ব্যবহৃত হয়, যেখানে পূর্বের কন্ট্রোল পয়েন্টকে স্মুথলি ফলো করা হয়। Q (Quadratic Bezier Curve):
এটি একটি সাধারণ বেজিয়ার কেভ যা দুটি পয়েন্টের মধ্যে সোজা রেখা এবং একটি কন্ট্রোল পয়েন্ট ব্যবহার করে।উদাহরণ:
Q20 20, 40 40এখানে, (20, 20) কন্ট্রোল পয়েন্টের মাধ্যমে (40, 40) পয়েন্টে চলে যাবে।
- T (Smooth Quadratic Bezier Curve):
এটি একটি স্মুথ কেভের মতো কাজ করে যা পূর্বের কন্ট্রোল পয়েন্টকে ফলো করে। A (Arc To):
এটি একটি আর্ক তৈরি করতে ব্যবহৃত হয়, যেখানে রেডিয়াস, রোটেশন, এবং সেন্টার পয়েন্টসহ আর্কের সকল ডাটা উল্লেখ করতে হয়।উদাহরণ:
A30 30 0 1 0 150 150Z (Close Path):
এটি পাথের শেষ পয়েন্টকে প্রথম পয়েন্টের সাথে সংযুক্ত করে একটি বন্ধ পাথ তৈরি করে।উদাহরণ:
Z
SVG Path এর উদাহরণ
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />
</svg>
এটি একটি বর্গক্ষেত্র তৈরি করবে যার প্রতিটি পাশের দৈর্ঘ্য 80 পিক্সেল।
SVG Path এর ব্যবহার
কাস্টম আকার তৈরি:
এসভিজি Path এর মাধ্যমে আপনি যেকোনো ধরনের কাস্টম আকার বা ডিজাইন তৈরি করতে পারেন, যেমন পলিগন, বেজিয়ার কেভ, এবং অন্যান্য জটিল রূপরেখা।
অ্যানিমেশন:
এসভিজি Path ব্যবহার করে গ্রাফিক্সের মধ্যে অ্যানিমেশন তৈরি করা যায়। CSS বা JavaScript এর মাধ্যমে পাথের অ্যানিমেশন করা যায়, যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি বাড়ায়।
লোগো এবং আইকন ডিজাইন:
এসভিজি Path ব্যবহার করে ওয়েবসাইট বা অ্যাপের জন্য সুন্দর এবং স্কেলেবল লোগো বা আইকন ডিজাইন করা যায়, যা যেকোনো স্ক্রীনে পরিষ্কার থাকে।
সারাংশ
এসভিজি Path একটি অত্যন্ত শক্তিশালী টুল যা ওয়েব গ্রাফিক্স ডিজাইনে জটিল আকার এবং ডিজাইন তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরনের কমান্ডের মাধ্যমে রেখা, বেজিয়ার কেভ, আর্ক ইত্যাদি তৈরি করার সুযোগ দেয়। এসভিজি Path ওয়েবসাইটে স্কেলেবল এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে সহায়ক, যা রেসপন্সিভ ডিজাইন এবং অ্যানিমেশনে কার্যকর।
Read more
